"use strict";
import * as React from 'react';
const { View, ImageBackground, ScrollView, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import { SCREEN_WIDTH } from "../../constant";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import Request from "../../utils/Request";
import Validator from "../../utils/Validator";
import { toastValidateError } from "../../utils/tools";
const { Actions } = require("react-native-router-flux");
const { Button, Modal } = require('antd-mobile');
const prompt = Modal.prompt;
const Alert = Modal.alert;
class BalancePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.doWithDraw = (number) => {
            if (Validator.validator(number, Validator.numberReg)) {
                const _number = Number(number);
                if (Number(this.props.auth.profile.store_collect) > 0) {
                    if (_number < Number(this.props.auth.profile.store_collect)) {
                        this.props.dispatch({
                            type: 'auth/doWithDraw',
                            payload: { price: _number }
                        });
                        return;
                    }
                }
                toastValidateError(null, '余额不足');
            }
            else {
                toastValidateError(null, '请输入正确的数字');
            }
        };
        this.onWithDrawPress = () => {
            prompt(' 提现', '请输入提现金额', [
                { text: '取消' },
                {
                    text: '确定',
                    onPress: this.doWithDraw,
                }
            ], 'number', null, ['请输入提现金额']);
        };
        this.closeModal = () => {
            this.setState({ showModal: false });
        };
        this.renderHeader = () => {
            return (<ImageBackground source={{ uri: Request.checkImageUrl(this.props.auth.profile.store_image) }} width={SCREEN_WIDTH} style={[{ height: autoSize(210) }]}>
                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                    <MyText color={Colors.White} fontSize={20}>{`账户余额(元)`}</MyText>
                    <MyText color={Colors.White} fontSize={36} style={{ marginTop: 5 }}>{Number(this.props.auth.profile.store_collect).toFixed(2)}</MyText>
                </View>
                <View style={[commonStyles.flexRow, {
                    height: autoSize(46),
                    paddingHorizontal: autoSize(30),
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    backgroundColor: 'rgba(255,255,255,0.3)'
                }]}>

                    <TouchableOpacity onPress={Actions.setting}>
                        <MyText color={Colors.White}>账户管理</MyText>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={Actions.income}>
                        <MyText color={Colors.White} style={{ marginTop: 5 }}>收支详情</MyText>
                    </TouchableOpacity>
                </View>
            </ImageBackground>);
        };
        this.state = {
            currentTab: 0,
            showModal: false
        };
    }
    componentWillMount() {
        this.props.dispatch({
            type: 'auth/upDataBalance'
        });
    }
    render() {
        if (!this.props.auth.isSignIn) {
            return null;
        }
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} title={{ title: this.props.title, tintColor: '#fff' }}/>
                <ScrollView>
                    {this.renderHeader()}
                    <View style={{ paddingVertical: 20, paddingHorizontal: 40 }}>
                        <Button type={'primary'} onClick={this.onWithDrawPress} style={{ marginBottom: 10, height: 38 }}>提现</Button>
                        <Button type={'primary'} style={{ height: 38 }} onClick={Actions.setting}>设置</Button>
                    </View>
                </ScrollView>
            </View>);
    }
}
export default connect(({ auth }) => ({ auth }))(BalancePage);
